<template>
  <div class="class-page">
    <h2>一年级班级管理</h2>
    
    <!-- 搜索区 + 批量删除按钮 -->
    <div class="operate-bar">
      <el-input
        v-model="searchName"
        placeholder="搜索班级名称"
        style="width: 300px"
        clearable
        @clear="loadClassList"
      >
        <template #append>
          <el-button @click="loadClassList" icon="Search"></el-button>
        </template>
      </el-input>

      <el-button 
        type="danger" 
        @click="handleBatchDelete"
        :disabled="selectedIds.length === 0"
        icon="Delete"
        style="margin-left: 10px"
      >
        批量删除
      </el-button>
      
      <el-button type="primary" @click="handleAdd" style="margin-left: 10px">新增班级</el-button>
    </div>

    <!-- 班级表格 -->
    <el-table 
      :data="classList" 
      border 
      style="margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="班级名称" width="200"></el-table-column>
      <el-table-column prop="headTeacher" label="班主任" width="200"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="班级名称" prop="name" :rules="[{ required: true, message: '请输入班级名称', trigger: 'blur' }]">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="班主任" prop="headTeacher" :rules="[{ required: true, message: '请输入班主任', trigger: 'blur' }]">
          <el-input v-model="form.headTeacher"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getClassList, addClass, editClass, deleteClass, checkClassHasStudent } from '@/api/class'

// 班级列表
const classList = ref([])
// 筛选条件
const searchName = ref('')
// 批量删除相关
const selectedIds = ref([])
// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('新增班级')
const formRef = ref(null)
const form = reactive({
  id: '',
  name: '',
  headTeacher: '',
  grade: 1
})

// 监听表格勾选
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(row => row.id)
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) return

  // 检查选中班级是否有学生
  const hasStudentClass = []
  for (const id of selectedIds.value) {
    const res = await checkClassHasStudent(id)
    if (res.data.hasStudent) {
      const cls = classList.value.find(c => c.id === id)
      hasStudentClass.push(cls.name)
    }
  }

  if (hasStudentClass.length > 0) {
    ElMessage.error(`以下班级有学生，无法删除：${hasStudentClass.join('、')}`)
    return
  }

  const confirm = await ElMessageBox.confirm(
    `确定删除选中的 ${selectedIds.value.length} 个班级？`,
    '确认删除',
    { type: 'warning' }
  ).catch(() => false)

  if (confirm) {
    try {
      await deleteClass(selectedIds.value.join(','))
      ElMessage.success('删除成功')
      loadClassList()
      selectedIds.value = []
    } catch (err) {
      ElMessage.error('删除失败')
    }
  }
}

// 加载班级列表
const loadClassList = async () => {
  const res = await getClassList({
    grade: 1,
    name: searchName.value
  })
  classList.value = res.data
}

// 新增班级
const handleAdd = () => {
  dialogTitle.value = '新增班级'
  Object.assign(form, { id: '', name: '', headTeacher: '' })
  dialogVisible.value = true
}

// 编辑班级
const handleEdit = (row) => {
  dialogTitle.value = '编辑班级'
  Object.assign(form, row)
  dialogVisible.value = true
}

// 保存班级
const handleSave = async () => {
  await formRef.value.validate()
  try {
    form.id ? await editClass(form) : await addClass(form)
    dialogVisible.value = false
    loadClassList()
    ElMessage.success('操作成功')
  } catch (err) {
    ElMessage.error('操作失败')
  }
}

// 单个删除
const handleDelete = async (row) => {
  const res = await checkClassHasStudent(row.id)
  if (res.data.hasStudent) {
    ElMessage.error('班级有学生，无法删除')
    return
  }

  if (await ElMessageBox.confirm(`确定删除【${row.name}】？`, '确认', { type: 'warning' }).catch(() => false)) {
    try {
      await deleteClass(row.id)
      loadClassList()
      ElMessage.success('删除成功')
    } catch (err) {
      ElMessage.error('删除失败')
    }
  }
}

onMounted(loadClassList)
</script>

<style scoped>
.operate-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}
</style>